import Icon from '@/components/Icon'
import { useState } from 'react'
import styles from './index.module.scss'
import { reportsType } from '@/api/constants'
import { useDispatch } from 'react-redux'
import { dislikeArticleAsync, reportArticleAsync } from '@/store/actions/home'
/**
 *
 * @param {String}  channel_id 频道id
 * @param {String}  article_id 文章id
 * @param {Function} onClose  处理函数
 * @returns
 */
const FeedbackActionMenu = ({ channel_id, article_id, onClose }) => {
  // 举报类型：normal 不感兴趣或拉黑作者 | junk 垃圾内容
  const [type, setType] = useState('normal')
  const dispatch = useDispatch()

  // 不感兴趣
  const onDislike = async () => {
    await dispatch(dislikeArticleAsync(article_id, channel_id))
    // 关闭模态框
    onClose()
  }

  // 举报
  const onReport = async (type) => {
    await dispatch(reportArticleAsync(article_id, channel_id, type))
    // 关闭模态框
    onClose()
  }

  return (
    <div className={styles.root}>
      <div className="more-action-modal">
        {/* normal 类型时的菜单内容 */}
        {type === 'normal' && (
          <>
            <div className="action-item" onClick={() => onDislike()}>
              <Icon type="iconicon_unenjoy1" /> 不感兴趣
            </div>
            <div className="action-item" onClick={() => setType('junk')}>
              <Icon type="iconicon_feedback1" />
              <span className="text">反馈垃圾内容</span>
              <Icon type="iconbtn_right" />
            </div>
            <div className="action-item">
              <Icon type="iconicon_blacklist" /> 拉黑作者
            </div>
          </>
        )}

        {/* junk 类型时的菜单内容 */}
        {type === 'junk' && (
          <>
            <div
              className="action-item title"
              onClick={() => setType('normal')}
            >
              <Icon type="iconfanhui" />
              <span className="back-text">反馈垃圾内容</span>
            </div>
            {reportsType.map((item) => (
              <div
                key={item.type}
                className="action-item"
                onClick={() => onReport(item.type)}
              >
                {item.content}
              </div>
            ))}
          </>
        )}
      </div>
    </div>
  )
}

export default FeedbackActionMenu
